<template>
  <div class="web_content" ref="box_ref">
    <div class="head_top" id="banner" :style="{'backgroundImage': 'url('+data1[0]?.url?.url+')'}">
      <h3>{{ data1[0]?.title }}</h3>
    </div>
    <div class="move_box">
      <div class="content_move">
        <h3><span>{{data2[0]?.subtitle}}</span><br/>{{data2[0]?.title}}</h3>
        <div class="class_move">
          <div class="block" @click="handleToDocument">
            <div class="icon">
              <img src="../../assets/软件介绍.png" alt="">
            </div>
            <div class="brief">
              <p>平台介绍</p>
              <span>OpenGADL简介</span>
            </div>
          </div>
          <div class="block" @click="handleToDocument">
            <div class="icon">
              <img src="../../assets/使用教程.png" alt="">
            </div>
            <div class="brief">
              <p>使用教程</p>
              <span>快速入门</span>
            </div>
          </div>
          <div class="block">
            <div class="icon">
              <img src="../../assets/技术咨询.png" alt="">
            </div>
            <div class="brief">
              <p>技术咨询</p>
              <span>交流咨询</span>
            </div>
          </div>
        </div>
        <div class="banner_move">
            <el-carousel :interval="4000" height="192px">
              <el-carousel-item v-for="(item,index) in data2[0]?.urlList" :key="index">
                <div class="banner_text_box">
                  <h3 class="banner_title">{{item.title}}</h3>
                  <div class="banner_conetnt">
                    <span>{{item.subtitle}}</span>
                  </div>
                </div>
                <img :src="item.url" alt="" style="width: 100%;height:100%">
              </el-carousel-item>
            </el-carousel>
            <div class="banner_tips">
              <div class="tips_item"><span>OpenGADL Model场景案例</span></div>
              <el-divider direction="vertical"></el-divider>
              <div class="tips_item"><span>OpenGADL Model功能特性</span></div>
              <el-divider direction="vertical"></el-divider>
              <div class="tips_item"><span>OpenGADL Model全新版本发布</span></div>
            </div>
        </div>
      </div>
      <div class="container_box_move">
        <div class="container_title">
          <p class="mb30 mt30">{{title3}}</p>
        </div>
        <div class="list_software">
          <div class="list_software_item" v-for="(item, index) in data3" :key="index">
            <img :src="item.url.url" alt="">
              <p>{{item.title}}</p>
              <span class="chineseName">{{ item.subititle2 }}</span>
              <el-divider class="line_model"></el-divider>
              <span>{{item.subtitle}}</span>
          </div>
        </div>
      </div>
      <!-- <div class="automation">
        <p class="mb30 mt30">全栈式模型 <span>自动化开发</span></p>
        <img src="../../assets/lc1.png" alt="">
      </div> -->
      <div class="industry">
        <div class="industry_title mb30 mt30">
          <p>{{data4[0]?.title}}</p>
          <span>{{data4[0]?.subtitle}}</span>
        </div>
        <div class="model_img">
          <img src="../../assets/class1.png" alt="">
        </div>
        <div class="model_name">
          <p>{{data4[0]?.subititle2}}<br/> {{data4[0]?.subititle3}}</p>
        </div>
        <div class="model_class">
          <div v-for="(item, index) in data4[0]?.urlList" :key="index">
            <img :src="item.url" alt="">
            <span>{{item.name}}</span>
          </div>
          <!-- <div>
            <img src="../../assets/2.png" alt="">
            <span>自动化程度高</span>
          </div>
          <div>
            <img src="../../assets/3.png" alt="">
            <span>模型体系安全</span>
          </div>
          <div>
            <img src="../../assets/4.png" alt="">
            <span>模型可信</span>
          </div> -->
        </div>
      </div>
      <div class="characteristic_move">
        <p class="mb30 mt30 characteristic_move_title">{{title5}}</p>
        <div class="characteristic_item" :style="{'backgroundImage': 'url('+item.url.url+')'}" v-for="(item, index) in data5" :key="index">
          <div class="characteristic_head">
            <p>{{ item.title }}</p>
            <el-divider class="line_item"></el-divider>
          </div>
          <div v-for="(x, i) in item.urlList" :key="i">
            <img :src="x.url" alt="">
            <span>{{x.name}}</span>
          </div>
        </div>
      </div>
      <div class="custom">
        <p class="mt30 mb30">{{data6[0]?.title}}</p>
        <div class="partner_list">
          <swiper :options="swiperOption" ref="mySwiper" v-if="data6[0]?.urlList.length">
            <swiper-slide v-for="(item, index) in data6[0]?.urlList" :key="index">
              <img :src="item.url" alt="">
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="footer" id="footer_move">
        <div>
          <p>{{ $store.state.footerData[2]?.title }}</p>
          <div class="overflow">{{ $store.state.footerData[2]?.subtitle }}</div>
        </div>
        <div class="">
          <p>{{ $store.state.footerData[0]?.title }}</p>
          <p class="point">OpenGADL社区<i class="el-icon-right pl6"></i></p>
          <p class="point" @click="handleToDocument">文档中心<i class="el-icon-right pl6"></i></p>
        </div>
        <div class="">
          <p>{{ $store.state.footerData[1]?.title }}</p>
          <p><i class="el-icon-message"></i> 联系邮箱：{{ $store.state.footerData[1]?.email }}</p>
          <p><i class="el-icon-phone-outline"></i> 客服电话：{{ $store.state.footerData[1]?.phone }}</p>
        </div>
      </div>
    </div>
    <div class="content">
      <h3><span>{{data2[0]?.subtitle}}</span>{{data2[0]?.title}}</h3>
      <div class="container">
        <div class="banner_box">
            <div class="left">
              <div class="block" @click="handleToDocument">
                <div class="icon">
                  <img src="../../assets/软件介绍.png" alt="">
                </div>
                <div class="brief">
                  <p>平台介绍</p>
                  <span>OpenGADL简介</span>
                </div>
                <i class="el-icon-arrow-right"></i>
              </div>
              <div class="block" @click="handleToDocument">
                <div class="icon">
                  <img src="../../assets/使用教程.png" alt="">
                </div>
                <div class="brief">
                  <p>使用教程</p>
                  <span>快速入门</span>
                </div>
                <i class="el-icon-arrow-right"></i>
              </div>
              <div class="block">
                <div class="icon">
                  <img src="../../assets/技术咨询.png" alt="">
                </div>
                <div class="brief">
                  <p>技术咨询</p>
                  <span>交流咨询</span>
                </div>
                <i class="el-icon-arrow-right">
                  
                </i>
              </div>
            </div>
            <div class="right">
              <el-carousel :interval="4000" height="470px">
                <el-carousel-item v-for="(item,index) in data2[0]?.urlList" :key="index">
                  <div class="banner_text_box">
                    <h3 class="banner_title">{{item.title}}</h3>
                    <div class="banner_conetnt">
                      <span>{{item.subtitle}}</span>
                    </div>
                  </div>
                  <!-- <h2 class="model_text">666666</h2> -->
                  <img :src="item.url" alt="">
                </el-carousel-item>
              </el-carousel>
              <div class="banner_tips">
                <div class="tips_item"><span>OpenGADL Model场景案例</span></div>
                <el-divider direction="vertical"></el-divider>
                <div class="tips_item"><span>OpenGADL Model功能特性</span></div>
                <el-divider direction="vertical"></el-divider>
                <div class="tips_item"><span>OpenGADL Model全新版本发布</span></div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="container_box">
      <div class="model">
        <div class="characteristic ">
          <div class="section-title">
            <p class="mb30 mt30">{{title3}}</p>
          </div>
          <div class="section_list">
            <div class="section_list_item mr50 mt20" @click="handleToDownload" v-for="(item, index) in data3" :key="index" v-if="!item.isTitle">
              <img :src="item?.url.url" alt="">
                <p>{{ item.title }}</p>
                <span class="chineseName">{{item.subititle2}}</span>
              <el-divider class="line_model"></el-divider>
              <span>{{item.subtitle}}</span>
            </div>
            
          </div>
        </div>
      </div>
      <div class="map">
      <div class="characteristic">
          <div class="section-title">
            <p>{{data4[0]?.title}}<span>{{data4[0]?.subtitle}}</span></p>
          </div>
          <div class="model_box">
            <div class="model_left">
              <img :src="data4[0]?.url.url" alt="">
            </div>
            <div class="model_right">
              <p class="mb22 mt60">{{data4[0]?.subititle2}}</p>
               <p>{{data4[0]?.subititle3}}</p>
                <div class="model_right_class">
                  <div v-for="(item, index) in data4[0]?.urlList" :key="index">
                    <img :src="item.url" alt="">
                    <span>{{ item.name }}</span>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="characteristic">
        <div class="section-title">
          <p class="mb30 mt100">{{title5}}</p>
        </div>
        <div class="section_list1">
          <div class="row1">
            <div class="section_list_item ml50 mt20"  :style="{'backgroundImage': 'url('+item.url.url+')'}" v-for="(item, index) in data5" :key="index">
              <div class="top1">
                <p>{{ item.title }}</p>
                <el-divider class="line_item"></el-divider>
              </div>
              <div v-for="(x, i) in item.urlList" :key="i">
                <img :src="x.url" alt="">
                <span>{{x.name}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="partner_bg">
        <div class="characteristic">
          <div class="section-title">
            <p class="mb30 mt50">{{data6[0]?.title}}</p>
          </div>
          <div class="partner_list"> 
            <swiper :options="swiperOption" ref="mySwiper" v-if="data6[0]?.urlList.length">
              <swiper-slide v-for="(item, index) in data6[0]?.urlList" :key="index">
                <img :src="item.url" alt="">
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
      <div class="footer" id="homeFooter">
        <div>
          <p>{{ $store.state.footerData[2]?.title }}</p>
          <div class="overflow">{{ $store.state.footerData[2]?.subtitle }}</div>
        </div>
        <div class="">
          <p>{{ $store.state.footerData[0]?.title }}</p>
          <p class="point">OpenGADL社区<i class="el-icon-right pl6"></i></p>
          <p class="point" @click="handleToDocument">文档中心<i class="el-icon-right pl6"></i></p>
        </div>
        <div class="">
          <p>{{ $store.state.footerData[1]?.title }}</p>
          <p><i class="el-icon-message"></i> 联系邮箱：{{ $store.state.footerData[1]?.email }}</p>
          <p><i class="el-icon-phone-outline"></i> 客服电话：{{ $store.state.footerData[1]?.phone }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from '@/components/header';
import router from '@/router';
import { WOW } from 'wowjs'
export default {
  name: "web_content",
  components: {
    Header,
  },
  data() {
    return {
      data1:[],
      data2:[],
      data3:[],
      title3:'',
      data4:[],
      data5:[],
      title5:'',
      data6:[],
      swiperOption: {
				loop: true,
        autoplay:true,
				// Autoplay: {
				// 	delay: 1000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: true,
				// },
        slidesPerView : 4,
        spaceBetween : 20,
        grabCursor : true,
        loopedSlides :6,
			}
    };
    
  },
  props: {},
  mounted() {
    console.log(this.$store.state.footerData)
    this.$api.GetListByType(10).then((res)=>{
      this.data1 = res
    })
    this.$api.GetListByType(2).then((res)=>{
      this.data2 = res
    })
    this.$api.GetListByType(1).then((res)=>{
      this.title3 = res[0].title
      res.forEach((x)=>{
        x.titleval = res.filter((x)=>{ return x.isTitle})[0]?.title;
      })
      this.data3 = res.filter((x)=>{ return !x.isTitle});
      console.log(this.data3)
    })
    this.$api.GetListByType(5).then((res)=>{
      this.data4 = res
    })
    this.$api.GetListByType(4).then((res)=>{
      this.title5 = res[0].title
      res.forEach((x)=>{
        x.titleval = res.filter((x)=>{ return x.isTitle})[0]?.title;
      })
      this.data5 = res.filter((x)=>{ return !x.isTitle});
    })
    this.$api.GetListByType(7).then((res)=>{
      this.data6 = res
    })
  },
  destroyed() {
  },
  methods: {
    // 页面跳转
    toDetails(type) {
      if (type == 1) {
        router.push({
          path: "/label"
        })
      } else {
        router.push({
          path: "/business"
        })
      }
    },

    //跳转使用文档
    handleToDocument(){
      this.$store.commit('navIndexCount',2)
      this.$router.push('/documention')
    },

    //跳转软件下载
    handleToDownload(){
      this.$store.commit('navIndexCount',1)
      this.$router.push('/download')
    },

  },
};
</script>

<style lang="scss" scoped>
.container_box,.move_box{
  display: none;
}
@media screen and (max-width: 750px) {
  
  .move_box{
    display: block;
    .content_move{
      padding: 0 16px;
      margin-top: 16px;
      display: block;
      
      h3{
        text-align: center;
        font-size: 24px;
        span{
          padding-right: 10px;
          font-size: 24px;
          word-wrap:break-word;
        }
      }
      .class_move{
        display: flex;
        justify-content: center;
        .block{
          margin-right: 8px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 109px;
          height: 140px;
          background: rgba(250, 250, 250, 1);
          box-shadow: 0px 1px 2px  rgba(102, 8, 116, 0.2);
          .brief{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            p{
              margin-top: 4px;
              margin-bottom: 4px;
              color: rgba(51, 51, 51, 1);
              font-size: 14px;
              font-weight: 700;
            }
            span{
              color: rgba(102, 102, 102, 1);
            }
          }
          .icon{
            width: 40px;
            height: 40px;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
  
      }

      .banner_text_box{
        position: absolute;
        left: 0;
        top:0;
        .banner_title{
          text-align: left;
          margin-top: 20px;
          padding-left: 20px;
          font-size: 18px;
          color: #fff;
        }
      
        .banner_conetnt{
          margin-top: 10px;
          margin-left: 20px;
          font-size: 13px;
          width: 200px;
          color: #fff;
        }
      }
      
      .banner_move{
        img{
          width: 100%;
          height: 100%;
        }
        position: relative;
        margin-top: 8px;
        .banner_tips{
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 9999;
          display: flex;
          align-items: center;
          height: 40px;
          width: 100%;
          background-color: rgba(0,0,0,.5);
          .tips_item{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100%;
            font-size: 12px;
            color: #fff;
          }
        }
      }
    }
  
    .container_box_move{
      padding: 0 16px;
      display: block;
      background-image: url('../../assets/产品服务-bg1.png');
      .container_title{
        display: flex;
        justify-content: center;
        align-items: center;
        p{
          font-size:24px;
          font-weight:700;
        }
      }
      .list_software{
        display: flex;
        flex-direction: column;
        align-items: center;
        .list_software_item{
          margin-bottom: 10px;
          padding: 6px 8px 0 8px;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 335px;
          height: 370px;
          opacity: 1;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 5px  rgba(0, 0, 0, 0.1);
          p{
            font-size: 24px;
            font-weight: 700;
            color: rgba(51, 51, 51, 1);
          }
          span{
            text-align: center;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 32px;
            color: rgba(102, 102, 102, 1);
          }

          .chineseName{
            color: #000 !important;
          }
          .line_model{
            margin:5px 0;
            width: 40px;
            background: rgba(51, 51, 51, 1);
            background: #af8bcf;
          }
        }
      }
    }

    .automation{
      display: flex;
      flex-direction: column;
      align-items: center;
      p{
        font-size:24px;
        font-weight:700;
        span{
          color: rgba(102, 8, 116, 1);
        }
      }
      img{
        width: 343px;
        height: 140px;
      }
    }

    .industry{
      padding:0 16px; 
      margin-top: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .industry_title{
        display: flex;
        flex-direction: column;
        align-items: center;
        p{
          margin-bottom: 6px;
          font-size:24px;
          font-weight:700;
        }
        span{
          font-size:24px;
          font-weight:700;
        }
      }

      .model_img{
        width: 343px;
        height: 276.78px;
        img{
          height: 100%;
          width: 100%;
        }
      }

      .model_name{
        margin-top: 22px;
        width: 100%;
        p{
          text-align: left;
          font-size: 24px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }
      }

      .model_class{
        display: flex;
        flex-wrap: wrap;
        div{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 179px;
          height: 60px;
          span{
            padding-left: 16px;
            font-size: 16px;
          }
          img{
            width: 20px;
          }
        }
      }
    }

    .characteristic_move{
      display:flex;
      flex-direction:column;
      align-items:center;
      .characteristic_move_title{
        font-size:24px;
        font-weight:700;
        color: rgba(51, 51, 51, 1);
      }
      .characteristic_item{
        margin-bottom:16px;
        width: 343px;
        height: 240px;
        box-shadow: 7px 5px -1px rgba(0, 0, 0, 0.1);
          background-repeat:no-repeat;
          background-size:100% 100%;
        .line_item{
          margin: 0 auto;
          margin-bottom:10px;
          height: 1px;
          width: 70%;
          background: rgba(245, 227, 250, 1);
        }
        div:not(div:first-child){
          margin-bottom: 15px;
          padding-left: 35px;
          display: flex;
          align-items: center;
          img{
            width: 15px;
            height: 15px;
            margin-right: 8px;
          }
          span{
            font-size: 16px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }
          
        }
        .characteristic_head{
          height: 70px;
          p{
            margin-bottom:10px;
            padding-top: 15px;
            margin-left: 30px;
            font-size: 24px;
            font-weight: 500;
            color: rgba(102, 8, 116, 1);
          }
        }
      }
    }

    .custom{
      margin-bottom:30px;
      p{
        text-align:center;
        font-size:24px;
        font-weight:700;
        color:rgba(51, 51, 51, 1);
        span{
          font-size:24px;
          font-weight:700;
          color: rgba(102, 8, 116, 1);
        }
      }

      

      .partner_list{
        .swiper-slide{
          width: 83px !important;
          height: 60px;
        }
        img{
          width:100%;
          height: 100%;
        }
      }
    }

    .footer{
      padding:16px;
      background-image:-webkit-linear-gradient( -180deg, rgb(42,39,167) 0%, rgb(130,48,142) 100%);
      .overflow{
        width: 345px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height:30px;
        color: rgba(181, 181, 181, 1);
        font-size: 14px;
        }
    }
    .footer>div{
      margin-bottom:20px;
    }
    .footer>div>p{
      text-align: left;
      margin-bottom: 16px;
      color: rgba(181, 181, 181, 1);
      font-size: 14px;
      }
      .footer>div>p:first-child{
      font-size: 18px;
      color: rgba(217, 217, 217, 1);
      }
  }
  .head_top{
    margin-top: 60px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('../../assets/banner_move.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    h3{
      font-size: 20px;
      font-weight: 700;
      color: #fff;
    }
  }
  .content{
    display: none;
  }

  

}
@media screen and (min-width: 750px) {
  .content_move{
    display: none;
  }
  .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
  }

  .model_text{
    position:absolute;
    left:0;
    top:0;
  }
  

  .banner_text_box{
    position: absolute;
    left: 0;
    top:0;
    .banner_title{
      margin-top: 60px;
      padding-left: 60px;
      font-size: 48px;
      color: #fff;
    }
  
    .banner_conetnt{
      margin-top: 20px;
      margin-left: 60px;
      font-size: 20px;
      width: 500px;
      color: rgba(102, 102, 102, 1);
      color: #fff;
    }
  }

  .head_top{
    margin-top: 70px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    h3{
      font-size: 40px;
      color: #fff;
    }
  }
  
  ::v-deep .el-carousel__indicators--horizontal{
    bottom: 50px !important;
  }
  
  ::v-deep .el-divider--vertical{
    height: 4em;
  }
  
  ::v-deep .el-timeline-item__wrapper{
    text-align: left;
  }
  
  ::v-deep .el-timeline-item{
    padding-bottom: 60px;
  }
  
  ::v-deep .el-timeline-item__content{
    font-size: 17px;
  }
  .web_content {
  background: #fff;
  overflow-y: auto;
  
  .partner_list{
  margin: 0 auto;
  width: 1000px;
  height: 150px;
  .swiper-slide{
    width: 246px !important;
    height: 102px;
  }

  img{
    width:100%;
    height: 100%;
  }
  }
  
  .point{
  cursor: pointer;
  }
  
  .point:hover{
  color: #1b76ee;
  }
  
  
  .footer{
  padding: 50px 200px;
  display: flex;
  justify-content: center;
  height: 150px;
  background-image:-webkit-linear-gradient( -180deg, rgb(42,39,167) 0%, rgb(130,48,142) 100%);
  }
  
  .footer>div:first-child{
  margin-right: 120px;
  width: 400px;
  }
  
  .overflow{
  width: 400px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(163, 158, 158, 1);
  font-size: 16px;
  }

  
  .footer>div:not(.footer>div:first){
  width: 250px;
  }
  .footer>div:last-child{
  margin-left: 80px;
  }
  .footer>div>p{
  text-align: left;
  margin-bottom: 26px;
  color: rgba(163, 158, 158, 1);
  font-size: 16px;
  }
  .footer>div>p:first-child{
  font-size: 20px;
  color: #fff;
  }
  .content {
    display: block;
      padding-top: 70px;
      position: relative;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      h3{
        font-size: 36px;
        span{
          padding-right: 10px;
          font-size: 36px;
        }
      }
      .container{
        width: 1300px;
        .banner_box{
          margin: 0 auto;
          margin-top: 50px;
          width: 1300px;
          height: 470px;
          display: flex;
          
          .left{
            position: relative;
            margin-right: 16px;
            width: 360px;
            
            .block:hover{
              color:#fff;
              background-image:-webkit-linear-gradient( -180deg, rgb(42,39,167) 0%, rgb(130,48,142) 100%);
              box-shadow: 0px 2px 6px  rgba(102, 8, 116, 0.2);
              cursor: pointer;
              i{
                display: block;
                color: #fff;
              }
              
              .brief{
                p{
                  color: #fff;
                }
                span{
                  color: #fff;
                }
  
              }
              
            }
            i{
              display: none;
              font-size: 16px;
            }
            .block{
              margin-bottom: 24px;
              display: flex;
              align-items: center;
              width: 360px;
              height: 140px;
              opacity: 1;
              background: #fff;
              box-shadow: 0px 2px 5px  rgba(0, 0, 0, 0.1);
  
              .icon{
                margin-left: 30px;
                width: 58px;
                height: 58px;
                opacity: 1;
                border-radius: 12px;
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(235, 235, 235, 1);
              }
  
              .brief{
                margin-left: 12px;
                width: 200px;
                height: 58px;
                p{
                  font-size: 18px;
                  color: rgba(51, 51, 51, 1);
                  font-weight: bold;
                  margin-bottom: 6px;
                }
                span{
                  font-size: 14px;
                  color: rgba(102, 102, 102, 1);
                }
              }
            }
          }
  
          .right{
            img{
              width: 100%;
              height: 100%;
            }
            width: 900px;
            position: relative;
            .banner_tips{
              position: absolute;
              bottom: 0;
              left: 0;
              z-index: 9999;
              display: flex;
              align-items: center;
              height: 50px;
              width: 100%;
              background-color: rgba(0,0,0,.5);
              .tips_item{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                font-size: 14px;
                color: #fff;
              }
            }
  
          }
        }
      }
      .hero-title {
        color: #000;
        font-size: 38px;
        font-weight: bold;
      }
  
  .btn-main {
    color: #fff;
    background-color: #5A4FCF;
    border-color: #5A4FCF;
  }
  
  .below{
  height: 60px;
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  i{
    font-size: 60px;
    color: #fff;
  }
  }
  }
  
  .container_box{
    display: block;
    padding-top: 50px;
  }
  
  .model{
    padding: 16px 0 60px 0;
    background-image:url('../../assets/产品服务-bg.png') ;
  }
  
  .map{
    padding: 40px 0 60px 0;
    background-image:url('../../assets/百业-bg.png') ;
  }
  
  .partner_bg{
    margin-top: 76px;
    padding: 40px 0 60px 0;
    background-image:url('../../assets/合作客户-bg.png') ;
  }
  
  .characteristic{
    margin: 0 auto;
    width: 1200px;
    .flow_box{
      img{
        width: 100%;
      }
    }
  
    .model_box{
      margin: 0 auto;
      margin-top: 70px;
      display: flex;
      justify-content: center;
      .model_left{
        margin-left: 100px;
        width: 520px;
        img{
          width: 100%;
          height: auto;
        }
      }
  
      .model_right{
        width: 500px;
        text-align: left;
        margin-left: 80px;
        p{
          margin-bottom: 15px;
          font-size: 32px;
          font-weight: bold;
        }
        .model_right_option>span{
          padding-right: 4px;
          color: rgba(30, 144, 255, 1);
          font-size: 15px;
          cursor: pointer;
        }
        .model_right_option>i{
          color: rgba(30, 144, 255, 1);
          font-size: 16px;
          padding-right: 28px;
        }
  
        .model_right_class{
          display: flex;
          flex-wrap: wrap;
        }
        .model_right_class>div{
          margin-top: 15px;
          padding-left: 8px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 200px;
          height: 60px;
          span{
            padding-left: 16px;
            font-size: 16px;
          }
          img{
            width: 20px;
          }
        }
      }
    }
  
    .section_list1{
      .row1,.row2{
        display: flex;
        justify-content: center;
        .el-divider--horizontal{
          background-color: #666;
          height: 2px;
          width: 30%;
        }
  
        
        .section_list_item{
          position: relative;
          text-align: left;
          width: 360px;
          height: 420px;
          box-shadow: 7px 5px 12px rgba(0, 0, 0, 0.1);
          background-repeat:no-repeat;
          background-size:cover;
          .line_item{
            margin: 0 auto;
            height: 1px;
            width: 70%;
            background: rgba(245, 227, 250, 1);
          }
          div:first-child{
            margin-bottom: 30px;
          }
          div:not(div:first-child){
            margin-bottom: 36px;
            padding-left: 35px;
            display: flex;
            align-items: center;
            img{
              width: 21px;
              height: 22px;
              margin-right: 8px;
            }
            span{
              font-size: 18px;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
            }
            
          }
          .top1{
            height: 100px;
            p{
              padding-top: 30px;
              margin-left: 30px;
              font-size: 32px;
              font-weight: 500;
              color: rgba(102, 8, 116, 1);
            }
          }
  
          .top2{
            height: 100px;
            p{
              padding-top: 30px;
              margin-left: 30px;
              font-size: 32px;
              font-weight: 500;
              color: rgba(102, 8, 116, 1);
            }
          }
          .top3{
            height: 100px;
            p{
              padding-top: 30px;
              margin-left: 30px;
              font-size: 32px;
              font-weight: 500;
              color: rgba(102, 8, 116, 1);
            }
          }
          p{
            margin: 0 30px;
            margin-bottom: 18px;
            font-size: 18px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }
          span{
            font-size: 14px;
            color: #666;
          }
        }
  
  
      }
      .section_list_item1{
        text-align: left;
        width: 300px;
        height: 240px;
        p{
          font-size: 26px;
        }
        span{
          font-size: 16px;
          color: #666;
        }
      }
    }
    .section_list{
      display: flex;
      justify-content: center;
  
      .section_list_item:hover{
        background: linear-gradient(180deg, rgba(129, 48, 142, 1) 0%, rgba(42, 39, 167, 1) 100%), rgba(255, 255, 255, 1);
        color: #fff;
        span{
          color: #fff;
        }
        .chineseName{
          color: #fff;
        }
      }
      
      .section_list_item{
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 360px;
        height: 420px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 5px  rgba(0, 0, 0, 0.1);
        cursor: pointer;
        img{
          height: 130px;
        }
  
        p{
          margin-top: 8px;
          font-size: 24px;
          font-weight: bold;
        }
        span{
          text-align: center;
          font-size: 16px;
          color: rgba(102, 102, 102, 1);
          line-height: 34px;
        }
        .chineseName{
          color: #000 ;
        }
  
        .line_model{
          width: 50px !important;
          margin:5px 0;
          height: 2px;
          background: #af8bcf;
        }
  
      }
    }
  }
  
  .trends{
    width: 300px;
    background-color: #fff;
    box-shadow: -3px 3px 3px 1px #e8e8e8; 
  }
  
  .trends_box{
    height: 400px;
    overflow-y: auto;
  }
  
  .trends_item:hover{
      color: #1b76ee;
  }
  
  .trends_item{
    margin-bottom: 19px;
      display: flex;
      justify-content: space-between;
      div{
        /* 固定宽度 */
        width: 100px;
        /* 强制文字不换行 */
        white-space:nowrap ;
        /* 将溢出部分进行隐藏 */
        overflow: hidden;
        /* 溢出文本转换为省略号 */
        text-overflow: ellipsis;
        cursor: pointer;
      }
      .date{
        color: #666;
        font-size: 14px;
      }
  }
  
  
  .head_title{
    padding-left: 16px;
    display: flex;
    align-items: center;
    background-color: rgb(107, 177, 247);
    color: #fff;
    height: 40px;
  
  }
  
  .el-carousel__item {
    background-color: #d3dce6;
  }
  
  .section-title{
    color: rgba(51, 51, 51, 1);
    p{
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      span{
      }
    }
  }
  }
}

</style>